
import React, { useState, useTransition } from 'react'
import './index.scss'
export const TabsContainer: React.FC = () => {
    // 被激活的标签页的名字
    const [activeTab, setActiveTab] = useState('home')
    const [isPending, startTransition] = useTransition()
    // 点击按钮，切换激活的标签页
    const onClickHandler = (tabName: string) => {
        startTransition(() => {
            setActiveTab(tabName)
        })
        // setActiveTab(tabName)
    }

    return (
        <div style={{ height: 500, overflowY: 'scroll' }}>
            <TabButton isActive={activeTab === 'home'} onClick={() => onClickHandler('home')}>
                首页
            </TabButton>
            <TabButton isActive={activeTab === 'movie'} onClick={() => onClickHandler('movie')}>
                电影
            </TabButton>
            <TabButton isActive={activeTab === 'about'} onClick={() => onClickHandler('about')}>
                关于
            </TabButton>
            <hr />

            {/* 根据被激活的标签名，渲染对应的 tab 组件 */}
            {activeTab === 'home' && <HomeTab />}
            {activeTab === 'movie' && <MovieTab />}
            {activeTab === 'about' && <AboutTab />}
        </div>
    )
}

// Button 组件 props 的 TS 类型
type TabButtonType = React.PropsWithChildren & { isActive: boolean; onClick: () => void }
// Button 组件
const TabButton: React.FC<TabButtonType> = (props) => {
    const [isPending, startTransition] = useTransition()
    const onButtonClick = () => {
        startTransition(() => {
            props.onClick()
        })

    }

    return (
        <button style={{ margin: '0 10px' }} className={['btn', props.isActive && 'active'].join(' ')} onClick={onButtonClick}>
            {props.children}
            {isPending && '⏱️'}
        </button>
    )
}

// Home 组件
const HomeTab: React.FC = () => {
    return <>HomeTab</>
}

// Movie 组件
const MovieTab: React.FC = () => {
    const items = Array(100000)
        .fill('MovieTab')
        .map((item, i) => <p key={i}>{item}</p>)
    return items
}

// About 组件
const AboutTab: React.FC = () => {
    return <>AboutTab</>
}
const UseTransitionPage: React.FC = () => {
    return (<>
        <TabsContainer></TabsContainer>
    </>)
}
export default UseTransitionPage